<template>
    <div id="carousel">
        <a-carousel  :effect="config.effect || 'scrollx'" :infinite="false" :autoplaySpeed="config.autoplaySpeed?config.autoplaySpeed*1000:3000" arrows :autoplay="true" >
            <template #prevArrow>
                <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                    <left-circle-outlined />
                </div>
            </template>
            <template #nextArrow>
                <div class="custom-slick-arrow" style="right: 10px">
                    <right-circle-outlined />
                </div>
            </template>
            <div class="carousel-titleField" v-for="(image,index) in images" :key="index" :class="config.backColor">
                <img @click="imageClick(image)" :style="{height:height_+'px'}"  :class="[config.fillType=='fill'?'carousel-view-img':'carousel-view-img-full']" :src="imageUrl(image.fileId)"/>
                <div class="carousel-titleField-text">{{image.title}}</div>
            </div>
        </a-carousel>
    </div>
</template>

<script>
/**
 * 自定义页面(轮播图组件)
 */
import FormPcApi from "@/common/api/form/FormPcApi.js"
import InsNewsApi from "@/common/api/portal/insNews.js"
import DialogBox from "@/assets/js/dialogBox.js";
import {Util,TokenUtil} from '@lowcode/jpaas-base-lib';

export default {
    name: "carouselView",
    props: {
        config:{
            type:Object,
            default:{},
        },
    },
    data() {
        return {
            images:[],
            height_:0,
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.images = [];
            if (this.config) {
                //表单
                if (this.config.dataSource == 'form') {
                    this.getCarouselData();
                } else { //新闻公告
                    this.getInsNews();
                }
            }
        },
        getCarouselData() {
            if (this.config.bodefId) {
                let param = {
                    boDefId: this.config.bodefId,
                    maxNum: this.config.maxNum,
                    titleField: this.config.titleField,
                    imgField: this.config.imgField,
                }
                FormPcApi.getCarouselData(param).then(res => {
                    if (res.success && res.data) {
                        this.images = [];
                        for (let i = 0; i < res.data.length; i++) {
                            let obj = res.data[i];
                            let title = obj[this.config.titleField];
                            let fileId = "";
                            let img = obj[this.config.imgField];
                            /**
                             * [{"fileId":"附件ID","fileName":"文件名","size":大小}]
                             */
                            if (img) {
                                let images = JSON.parse(img);
                                fileId = images[0].fileId;
                            }
                            this.images.push({
                                title: title,
                                fileId: fileId,
                                pkId: obj.pkId || obj.PKID
                            })
                        }
                        this.initImg()
                    }
                });
            }
        },
        initImg() {
            this.height_ = document.getElementById('carousel').clientHeight;
            if (document.getElementsByClassName('slick-slide').style) {
                document.getElementsByClassName('slick-slide').style.height = this.height_;
                document.getElementsByClassName('slick-slide').style.lineHeight = this.height_;
            }
        },
        //新闻公告
        getInsNews() {
            if (!this.config.newType) {
                return;
            }
            InsNewsApi.getAllIssuedNews({
                params: {'Q_SYS_DIC_NEW__S_EQ': this.config.newType},
                pageSize: this.config.maxNum || 10
            }).then(res => {
                if (res.data) {
                    this.images = [];
                    for (let i = 0; i < res.data.length; i++) {
                        let obj = res.data[i];
                        if (!obj.imgFileId) {
                            continue;
                        }
                        this.images.push({
                            title: obj.subject,
                            fileId: obj.imgFileId,
                            pkId: obj.pkId
                        })
                    }
                    this.initImg()
                }
            });
        },
        imageUrl(fileId) {
            let token=TokenUtil.getToken();
            fileId=Util.encryptWord(fileId);
            let url = `/api/api-system/system/core/sysFile/previewImg?fileId=${fileId}&accessToken=` + token;
            return url;
        },
        imageClick(imageObj) {
            if (this.config.clickFunc == 'noAction') {
                return;
            }
            if (this.config.dataSource == 'form') {
                this.getFormDetail(imageObj.pkId);
            } else {
                this.getNewsDetail(imageObj.pkId);
            }
        },
        getFormDetail(pkId) {
            DialogBox.showForm({
                title: this.config.name,
                curVm: this,
                data: {
                    alias: this.config.alias,
                    readOnly: true,
                    pkId: pkId
                },
                max: true
            }, function (action, data) {
            });
        },
        //显示消息明细
        getNewsDetail(pkId) {
            DialogBox.getNewsDetail({
                curVm: this, data: {pkId: pkId, single: true, readonly: true}, widthHeight: ['1000px', '700px']
            }, function (self_, data) {
            });
        }
    },
    watch: {
        config:{
            handler: function (val, oldVal) {
                this.init();
            },
            deep: true
        }
    },
}
</script>

<style scoped>
.carousel-titleField{
    position: relative;
}
.carousel-titleField-text{
    position: absolute;
    bottom: 30px;
    left: 10px;
    color: white;
    font-weight: 600;
    font-size: 18px;
}
/* For demo */
.ant-carousel >>> .slick-slide {
    text-align: center;
}
#carousel>>>.slick-dots{
    top:calc(100% - 20px) !important;
}
.ant-carousel >>> .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
    display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
    opacity: 1;
}
.ant-carousel >>> .custom-slick-arrow:hover i{
    color: #1890ff!important;
}

.ant-carousel >>> .slick-slide h3 {
    color: #fff;
}
/**/
#carousel{
    height: 100%;
    overflow: hidden;
}
.carousel-view-img{
    width: 100%;
    object-fit: cover;
}
.carousel-view-img-full{
    height: 100%;
    object-fit: cover;
    margin: auto;
}
.black{
    background-color: black;
}
.white{
    background-color: white;
}
.grey{
    background-color: grey;
}
</style>
